<template>
    <div>
        <ul>
        <li v-for="(item, index) in pages"
        :key="index" :class="cur === item ? 'active': ''" @click="currentPage(item)">{{item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cur: 1
        }
    },
    props: {
        pageIndex: { // 当前页 
            type: Number,
            default: 1
        },

        pageSize: {
            type: Number,
            default: 8
        },

        totel: {
            type: Number,
            default: 100
        } 
    },
    computed: {
        // 分页显示的数据数据
        pages() {
            let arr = [] // 用来收集页码的数组
            // 计算一共有多少页数据 数据向上取整
            let all = Math.ceil(this.totel/this.pageSize)
            // 1 ... ,4,5, 6, 7, 8, ..., 10
            if(this.pageIndex <= 4) {
                arr = [1, 2, 3, 4, 5, '...', all]
            } else if(this.pageIndex >= all - 3) {
                arr = [1, '...',all -4, all - 3 ,all-2 , all - 1,all]
            } else {
                arr = [1, '...', this.pageIndex - 2,this.pageIndex - 1,this.pageIndex, this.pageIndex + 1, this.pageIndex + 2  ,'...', all]
            }
            return arr
        }
    },
    created() {

    },
    methods:{
        currentPage(item) {
            if(item == '...') return
            // this.pageIndex = item
            this.cur = item
            // this.$emit('update:pageIndex', item)
            this.$emit('curpage', item)
        }
    },
}
</script>

<style scoped lang="scss">
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        li {
            width: 30px;
            height: 30px;
            border: 1px solid #333;
            border-radius: 4px;
            margin: 0 5px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .active {
            background-color: skyblue;
            color: #fff;
        }
    }
</style>